<template>
  <!-- 精彩跟帖页面 -->
  <div class="thread">
    <myheader title="精彩跟帖" class="toback">
      <span slot="left" class="iconfont iconjiantou" @click="$router.back()">
        <span class="iconfont iconnew new"></span>
      </span>
      <span slot="right"></span>
    </myheader>
    <div class="list">
      <div v-if="arr.length !== 0">
        <div v-for="(v, i) in arr" :key="i" class="bg">
          <div class="box">
            <img :src="url + v.user.head_img" />
            <div class="center">
              <p>{{ v.user.nickname }}</p>
              <span>{{ v.create_date | relativeformat }}</span>
            </div>
            <span @click="tocomment(v)" class="butt">回复</span>
          </div>
          <div class="content">{{ v.content }}</div>
          <hmcom v-if="v.parent" :v="v.parent"></hmcom>
        </div>
        <div class="but">我的底线您破不了 <br /><br />哈哈...</div>
      </div>
      <div v-if="arr.length == 0" class="oncom">暂时没有评价</div>
    </div>
    <!-- 传输数据的同时将子组件定义的mycancel事件触发了取消事件 -->
    <mycombut
      :obj="obj"
      :idobj="idobj"
      @totop="totop"
      @mycancel="idobj = null"
    ></mycombut>
  </div>
</template>

<script>
import hmcom from "@/components/hmcomment.vue";
import myheader from "@/components/hmheader.vue";
import mycombut from "@/components/commentbuttom.vue";
import { postcomment, postarticaldetail } from "@/apis/postlists.js";
import { relativeformat } from "@/utils/myfilters.js";
import axios from "@/utils/myaxios";
export default {
  components: {
    myheader,
    mycombut,
    hmcom,
  },
  async mounted() {
    this.init();
  },
  methods: {
    //分装获取数据的函数
    async init() {
      let id = this.$route.params.id;
      let res = await postcomment(id);
      this.arr = res.data.data;
      let res2 = await postarticaldetail(id);
      this.obj = res2.data.data;
    },
    //点击回复
    tocomment(e) {
      this.idobj = e;
    },
    //回顶部
    totop() {
      this.init();
      window.scrollTo(0, 0);
    },
  },
  data() {
    return {
      arr: [],
      url: axios.defaults.baseURL,
      obj: {},
      onoff: false,
      idobj: {},
    };
  },
  filters: {
    relativeformat,
  },
};
</script>

<style lang="less" scoped>
.thread {
  background-color: #eee;
}
.oncom {
  width: 100%;
  border-top: 1px solid #ccc;
  text-align: center;
  padding: 20px 0;
  color: #888;
}
.but {
  border-top: 1px solid #ccc;
  width: 100%;
  color: #888;
  text-align: center;
  padding: 20px 0;
}
.toback {
  position: relative;
}
.iconnew {
  margin-left: 20px;
  font-size: 50px;
  position: absolute;
  top: -2px;
  left: 15px;
}
.bg {
  padding: 25px 10px;
  border-bottom: 1px solid #ccc;
  .content {
    padding-left: 15px;
    font-size: 14px;
  }
}
.list {
  .box {
    padding: 10px 0;
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-size: 12px;
    color: #888;
    > img {
      display: block;
      width: 50/360 * 100vw;
      height: 50/360 * 100vw;
      border-radius: 50%;
      padding: 0 10px;
    }
    > .center {
      flex: 1;
      > p {
        line-height: 30px;
        font-size: 14px;
      }
    }
    .butt {
      height: 20px;
      background-color: #eee;
      font-size: 13px;
      border-radius: 30px;
      line-height: 20px;
      padding: 2px 15px;
    }
  }
}
</style>